<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>互联网实验室 - 上课系统</title>
  <!-- 引入外部资源 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="../css/class.css">
</head>

<body>
  <!-- 顶部导航栏 -->
  <header class="main-header">
    <div class="header-container">
      <div class="logo">
        <img src="../img/logo.jpg" alt="互联网实验室Logo" class="w-8 h-8">
        <h1>互联网实验室</h1>
      </div>

      <div class="header-right">
        <!-- 通知按钮 -->
        <div class="notification-wrapper">
          <button class="notification-btn" id="notificationBtn">
            <i class="fa fa-bell"></i>
            <span class="badge nav-badge">3</span>
          </button>

          <!-- 通知面板 -->
          <div class="notification-panel" id="notificationPanel">
            <div class="panel-header">
              <h3>通知</h3>
              <span class="badge notification-badge">3</span>
            </div>
            <div class="panel-controls">
              <select id="notificationFilter">
                <option value="all">全部</option>
                <option value="unread">未读</option>
                <option value="lab">实验室通知</option>
                <option value="course">课程相关</option>
              </select>
              <button id="markAllRead">标为已读</button>
            </div>
            <div class="notification-list">
              <!-- 通知项 -->
              <div class="notification-item unread">
                <div class="notification-icon">
                  <i class="fa fa-home"></i>
                </div>
                <div class="notification-content">
                  <p>实验室设备维护通知：本周六将进行设备维护，请提前做好准备</p>
                  <span class="time">10分钟前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item unread">
                <div class="notification-icon">
                  <i class="fa fa-book"></i>
                </div>
                <div class="notification-content">
                  <p>Web前端开发作业已发布，请在周五前完成提交</p>
                  <span class="time">2小时前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item unread">
                <div class="notification-icon">
                  <i class="fa fa-calendar"></i>
                </div>
                <div class="notification-content">
                  <p>下周二的实验课时间调整为下午2点开始</p>
                  <span class="time">昨天</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item">
                <div class="notification-icon">
                  <i class="fa fa-users"></i>
                </div>
                <div class="notification-content">
                  <p>新的实验室小组已分配，请查看你的分组情况</p>
                  <span class="time">3天前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户菜单 -->
        <div class="user-menu">
          <button id="userMenuBtn" class="user-btn">
            <div class="avatar">
              <img src="https://picsum.photos/id/64/200/200" alt="用户头像">
            </div>
            <span id="userName">请登录</span>
            <i class="fa fa-angle-down"></i>
          </button>

          <div class="user-dropdown" id="userDropdown">
            <div class="user-info">
              <p id="dropdownUserName">请登录</p>
              <p id="dropdownUserRole">未登录</p>
            </div>
            <div class="dropdown-divider"></div>
            <button id="loginBtn" class="dropdown-item">
              <i class="fa fa-sign-in"></i> 登录
            </button>
            <button id="registerBtn" class="dropdown-item">
              <i class="fa fa-user-plus"></i> 注册
            </button>
            <button id="logoutBtn" class="dropdown-item hidden">
              <i class="fa fa-sign-out"></i> 退出
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <div class="main-container">
    <!-- 侧边导航 -->
    <aside class="sidebar">
      <nav class="sidebar-nav">
        <a href="#dashboard" class="nav-item active" data-target="dashboard">
          <i class="fa fa-tachometer"></i>
          <span>仪表盘</span>
        </a>
        <a href="#forum" class="nav-item" data-target="forum">
          <i class="fa fa-comments"></i>
          <span>论坛</span>
        </a>
        <a href="#assignments" class="nav-item" data-target="assignments">
          <i class="fa fa-file-text-o"></i>
          <span>作业提交</span>
        </a>
        <a href="#leave" class="nav-item" data-target="leave">
          <i class="fa fa-calendar-times-o"></i>
          <span>请假申请</span>
        </a>
        <a href="#attendance" class="nav-item" data-target="attendance">
          <i class="fa fa-check-square-o"></i>
          <span>签到</span>
        </a>
        <a href="#notifications-page" class="nav-item" data-target="notifications-page">
          <i class="fa fa-bell-o"></i>
          <span>通知中心</span>
          <span class="badge nav-badge">3</span>
        </a>
      </nav>

      <div class="lab-info">
        <div class="lab-status">
          <span class="status-indicator online"></span>
          <span>实验室状态：在线</span>
        </div>
        <div class="current-course">
          <i class="fa fa-book"></i>
          <span>当前课程：Web前端开发</span>
        </div>
      </div>
    </aside>

    <!-- 页面内容 -->
    <main class="content">
      <!-- 仪表盘页面 -->
      <div id="dashboard" class="page active">
        <div class="page-header">
          <h2>仪表盘</h2>
          <p>欢迎来到互联网实验室上课系统</p>
        </div>

        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon blue">
              <i class="fa fa-check-circle"></i>
            </div>
            <div class="stat-info">
              <p>本周签到</p>
              <h3>3/5</h3>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon green">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="stat-info">
              <p>待提交作业</p>
              <h3>2</h3>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon purple">
              <i class="fa fa-calendar"></i>
            </div>
            <div class="stat-info">
              <p>本周课程</p>
              <h3>5</h3>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon red">
              <i class="fa fa-bell-o"></i>
            </div>
            <div class="stat-info">
              <p>未读通知</p>
              <h3>3</h3>
            </div>
          </div>
        </div>

        <div class="grid-layout">
          <div class="card">
            <div class="card-header">
              <h3>本周课程安排</h3>
            </div>
            <div class="card-body">
              <div class="schedule-list">
                <div class="schedule-item">
                  <div class="schedule-day">周一</div>
                  <div class="schedule-content">
                    <p><span class="time">09:00-11:30</span> 计算机网络基础</p>
                    <p><span class="time">14:00-16:30</span> 操作系统原理</p>
                  </div>
                </div>
                <div class="schedule-item">
                  <div class="schedule-day">周二</div>
                  <div class="schedule-content">
                    <p><span class="time">09:00-11:30</span> Web前端开发 <span class="lab-tag">实验课</span></p>
                  </div>
                </div>
                <div class="schedule-item">
                  <div class="schedule-day">周三</div>
                  <div class="schedule-content">
                    <p><span class="time">14:00-16:30</span> 数据库系统</p>
                  </div>
                </div>
                <div class="schedule-item">
                  <div class="schedule-day">周四</div>
                  <div class="schedule-content">
                    <p><span class="time">09:00-11:30</span> 算法设计与分析</p>
                  </div>
                </div>
                <div class="schedule-item">
                  <div class="schedule-day">周五</div>
                  <div class="schedule-content">
                    <p><span class="time">14:00-16:30</span> 移动应用开发 <span class="lab-tag">实验课</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h3>近期作业</h3>
            </div>
            <div class="card-body">
              <div class="assignment-list">
                <div class="assignment-item">
                  <div class="assignment-info">
                    <h4>HTML布局练习</h4>
                    <p>完成响应式网页布局设计，提交HTML和CSS文件</p>
                  </div>
                  <div class="assignment-meta">
                    <span class="due-date"><i class="fa fa-calendar"></i> 5月15日截止</span>
                    <a href="#assignments" class="view-btn">查看</a>
                  </div>
                </div>
                <div class="assignment-item">
                  <div class="assignment-info">
                    <h4>JavaScript交互效果</h4>
                    <p>实现表单验证和动态交互效果</p>
                  </div>
                  <div class="assignment-meta">
                    <span class="due-date"><i class="fa fa-calendar"></i> 5月20日截止</span>
                    <a href="#assignments" class="view-btn">查看</a>
                  </div>
                </div>
                <div class="assignment-item">
                  <div class="assignment-info">
                    <h4>网络协议分析报告</h4>
                    <p>分析TCP/IP协议栈的工作原理</p>
                  </div>
                  <div class="assignment-meta">
                    <span class="due-date"><i class="fa fa-calendar"></i> 5月25日截止</span>
                    <a href="#assignments" class="view-btn">查看</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <h3>学习进度</h3>
          </div>
          <div class="card-body">
            <div class="chart-container">
              <canvas id="progressChart"></canvas>
            </div>
          </div>
        </div>
      </div>

      <!-- 论坛页面 -->
      <div id="forum" class="page hidden">
        <div class="page-header">
          <h2>实验室论坛</h2>
          <p>与同学和老师交流学习问题和经验</p>
        </div>

        <div class="forum-controls">
          <button id="newThreadBtn" class="primary-btn">
            <i class="fa fa-plus"></i> 发布新主题
          </button>
          <div class="search-box">
            <input type="text" placeholder="搜索主题...">
            <button><i class="fa fa-search"></i></button>
          </div>
        </div>

        <div class="card">
          <div class="card-header forum-header">
            <div class="forum-column topic-column">主题</div>
            <div class="forum-column author-column">作者</div>
            <div class="forum-column replies-column">回复</div>
            <div class="forum-column last-post-column">最后回复</div>
          </div>
          <div class="card-body forum-body">
            <div class="thread-item">
              <div class="forum-column topic-column">
                <div class="thread-info">
                  <h4><a href="#">HTML5新特性有哪些实用功能？</a></h4>
                  <p>想了解HTML5相比之前版本有哪些重要更新...</p>
                  <div class="thread-tags">
                    <span class="tag html">HTML5</span>
                    <span class="tag frontend">前端</span>
                  </div>
                </div>
              </div>
              <div class="forum-column author-column">
                <div class="user-info">
                  <img src="https://picsum.photos/id/237/100/100" alt="用户头像">
                  <span>张三</span>
                </div>
              </div>
              <div class="forum-column replies-column">
                <span>12</span>
              </div>
              <div class="forum-column last-post-column">
                <div class="last-post-info">
                  <span>李老师</span>
                  <span>2小时前</span>
                </div>
              </div>
            </div>
            <div class="thread-item">
              <div class="forum-column topic-column">
                <div class="thread-info">
                  <h4><a href="#">实验室电脑无法安装Node.js怎么办？</a></h4>
                  <p>今天在实验室电脑上尝试安装Node.js，出现错误...</p>
                  <div class="thread-tags">
                    <span class="tag nodejs">Node.js</span>
                    <span class="tag lab">实验室</span>
                  </div>
                </div>
              </div>
              <div class="forum-column author-column">
                <div class="user-info">
                  <img src="https://picsum.photos/id/1027/100/100" alt="用户头像">
                  <span>李四</span>
                </div>
              </div>
              <div class="forum-column replies-column">
                <span>8</span>
              </div>
              <div class="forum-column last-post-column">
                <div class="last-post-info">
                  <span>管理员</span>
                  <span>昨天</span>
                </div>
              </div>
            </div>
            <div class="thread-item">
              <div class="forum-column topic-column">
                <div class="thread-info">
                  <h4><a href="#">分享几个实用的前端开发工具</a></h4>
                  <p>整理了一些我常用的前端开发工具，希望对大家有帮助...</p>
                  <div class="thread-tags">
                    <span class="tag tools">工具</span>
                    <span class="tag frontend">前端</span>
                  </div>
                </div>
              </div>
              <div class="forum-column author-column">
                <div class="user-info">
                  <img src="https://picsum.photos/id/1012/100/100" alt="用户头像">
                  <span>王五</span>
                </div>
              </div>
              <div class="forum-column replies-column">
                <span>23</span>
              </div>
              <div class="forum-column last-post-column">
                <div class="last-post-info">
                  <span>赵六</span>
                  <span>3天前</span>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer forum-pagination">
            <ul class="pagination">
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 作业提交页面 -->
      <div id="assignments" class="page hidden">
        <div class="page-header">
          <h2>作业提交</h2>
          <p>查看和提交课程作业</p>
        </div>

        <div class="assignments-filter">
          <select>
            <option value="all">所有课程</option>
            <option value="web" selected>Web前端开发</option>
            <option value="network">计算机网络</option>
            <option value="database">数据库系统</option>
          </select>
          <select>
            <option value="all">所有状态</option>
            <option value="pending" selected>未提交</option>
            <option value="submitted">已提交</option>
            <option value="graded">已评分</option>
          </select>
        </div>

        <div class="assignments-list">
          <div class="assignment-card">
            <div class="assignment-header">
              <h3>HTML布局练习</h3>
              <span class="assignment-status pending">未提交</span>
            </div>
            <div class="assignment-details">
              <div class="detail-item">
                <i class="fa fa-book"></i>
                <span>Web前端开发</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-calendar"></i>
                <span>截止日期：5月15日 23:59</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-user"></i>
                <span>李老师</span>
              </div>
            </div>
            <div class="assignment-description">
              <h4>作业要求：</h4>
              <p>使用HTML5和CSS3实现一个响应式网页布局，包含导航栏、内容区和页脚。要求在不同屏幕尺寸下都能良好显示，使用Flexbox或Grid布局。提交HTML和CSS源文件，压缩为ZIP格式上传。</p>
              <div class="assignment-attachments">
                <a href="#" class="attachment"><i class="fa fa-file-pdf-o"></i> 作业说明.pdf</a>
                <a href="#" class="attachment"><i class="fa fa-file-image-o"></i> 参考设计图.png</a>
              </div>
            </div>
            <div class="assignment-actions">
              <button class="submit-assignment primary-btn" data-id="1">提交作业</button>
            </div>
          </div>

          <div class="assignment-card">
            <div class="assignment-header">
              <h3>JavaScript交互效果</h3>
              <span class="assignment-status pending">未提交</span>
            </div>
            <div class="assignment-details">
              <div class="detail-item">
                <i class="fa fa-book"></i>
                <span>Web前端开发</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-calendar"></i>
                <span>截止日期：5月20日 23:59</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-user"></i>
                <span>李老师</span>
              </div>
            </div>
            <div class="assignment-description">
              <h4>作业要求：</h4>
              <p>实现一个包含表单验证的注册页面，使用JavaScript实现实时验证和错误提示。同时实现至少3种不同的交互效果，如平滑滚动、模态框和下拉菜单等。</p>
            </div>
            <div class="assignment-actions">
              <button class="submit-assignment primary-btn" data-id="2">提交作业</button>
            </div>
          </div>

          <div class="assignment-card">
            <div class="assignment-header">
              <h3>DOM操作练习</h3>
              <span class="assignment-status submitted">已提交</span>
            </div>
            <div class="assignment-details">
              <div class="detail-item">
                <i class="fa fa-book"></i>
                <span>Web前端开发</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-calendar"></i>
                <span>截止日期：5月5日 23:59</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-user"></i>
                <span>李老师</span>
              </div>
            </div>
            <div class="assignment-description">
              <h4>作业要求：</h4>
              <p>使用原生JavaScript实现DOM元素的创建、修改、删除等操作，完成一个待办事项列表，可以添加、删除和标记完成状态。</p>
              <div class="submission-info">
                <i class="fa fa-check-circle"></i>
                <span>已提交：dom-task-list.zip</span>
                <span>提交时间：5月4日 15:30</span>
              </div>
            </div>
            <div class="assignment-actions">
              <button class="primary-btn">查看成绩</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 请假申请页面 -->
      <div id="leave" class="page hidden">
        <div class="page-header">
          <h2>请假申请</h2>
          <p>提交你的请假申请，等待老师审批</p>
        </div>

        <div class="grid-layout">
          <div class="card leave-form-card">
            <div class="card-header">
              <h3>提交请假申请</h3>
            </div>
            <div class="card-body">
              <form id="leaveForm">
                <div class="form-group">
                  <label for="leaveType">请假类型</label>
                  <select id="leaveType" required>
                    <option value="">请选择请假类型</option>
                    <option value="sick">病假</option>
                    <option value="personal">事假</option>
                    <option value="late">迟到</option>
                    <option value="early">早退</option>
                  </select>
                </div>

                <div class="form-row">
                  <div class="form-group half">
                    <label for="leaveStart">开始时间</label>
                    <input type="datetime-local" id="leaveStart" required>
                  </div>
                  <div class="form-group half">
                    <label for="leaveEnd">结束时间</label>
                    <input type="datetime-local" id="leaveEnd" required>
                  </div>
                </div>

                <div class="form-group">
                  <label for="leaveReason">请假原因</label>
                  <textarea id="leaveReason" rows="4" placeholder="请详细说明请假原因..." required></textarea>
                </div>

                <div class="form-group">
                  <label for="leaveAttachment">附件（可选）</label>
                  <div class="file-upload">
                    <input type="file" id="leaveAttachment">
                    <label for="leaveAttachment">
                      <i class="fa fa-upload"></i>
                      <span>选择文件</span>
                    </label>
                    <span id="attachmentName" class="file-name">未选择文件</span>
                  </div>
                </div>

                <div class="form-actions">
                  <button type="submit" class="primary-btn">提交申请</button>
                  <button type="reset" class="secondary-btn">重置</button>
                </div>
              </form>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h3>请假记录</h3>
            </div>
            <div class="card-body">
              <div class="leave-records">
                <div class="leave-record">
                  <div class="record-header">
                    <h4>病假</h4>
                    <span class="status approved">已批准</span>
                  </div>
                  <div class="record-details">
                    <p><i class="fa fa-calendar"></i> 2023-05-01 至 2023-05-02</p>
                    <p><i class="fa fa-clock-o"></i> 申请时间：2023-04-30 09:15</p>
                    <p><i class="fa fa-user"></i> 审批人：李老师</p>
                  </div>
                </div>

                <div class="leave-record">
                  <div class="record-header">
                    <h4>事假</h4>
                    <span class="status pending">待审批</span>
                  </div>
                  <div class="record-details">
                    <p><i class="fa fa-calendar"></i> 2023-05-10 至 2023-05-10</p>
                    <p><i class="fa fa-clock-o"></i> 申请时间：2023-05-08 14:30</p>
                    <p><i class="fa fa-user"></i> 审批人：待审批</p>
                  </div>
                </div>

                <div class="leave-record">
                  <div class="record-header">
                    <h4>迟到</h4>
                    <span class="status rejected">已拒绝</span>
                  </div>
                  <div class="record-details">
                    <p><i class="fa fa-calendar"></i> 2023-04-25 09:30 至 2023-04-25 10:00</p>
                    <p><i class="fa fa-clock-o"></i> 申请时间：2023-04-25 08:45</p>
                    <p><i class="fa fa-user"></i> 审批人：王老师</p>
                    <p class="reject-reason"><i class="fa fa-exclamation-circle"></i> 拒绝原因：无正当理由</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 签到页面 -->
      <div id="attendance" class="page hidden">
        <div class="page-header">
          <h2>签到</h2>
          <p>课程签到和出勤记录</p>
        </div>

        <div class="card checkin-card">
          <div class="card-header">
            <h3>今日签到</h3>
          </div>
          <div class="card-body checkin-body">
            <div class="current-course">
              <h4>当前课程：Web前端开发</h4>
              <p>签到时间：09:00 - 09:30</p>
              <p class="checkin-status pending">未签到</p>
            </div>
            <div class="checkin-actions">
              <button id="checkinBtn" class="primary-btn">
                <i class="fa fa-qrcode"></i> 扫码签到
              </button>
              <p class="checkin-note">请在规定时间内完成签到，逾期将无法签到</p>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <h3>近期出勤记录</h3>
          </div>
          <div class="card-body">
            <div class="attendance-table">
              <table>
                <thead>
                  <tr>
                    <th>日期</th>
                    <th>课程名称</th>
                    <th>签到时间</th>
                    <th>状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>2023-05-08</td>
                    <td>Web前端开发</td>
                    <td>09:15</td>
                    <td><span class="status present">已签到</span></td>
                  </tr>
                  <tr>
                    <td>2023-05-05</td>
                    <td>数据库系统</td>
                    <td>14:05</td>
                    <td><span class="status present">已签到</span></td>
                  </tr>
                  <tr>
                    <td>2023-05-03</td>
                    <td>计算机网络基础</td>
                    <td>-</td>
                    <td><span class="status absent">未签到</span></td>
                  </tr>
                  <tr>
                    <td>2023-05-02</td>
                    <td>操作系统原理</td>
                    <td>09:02</td>
                    <td><span class="status present">已签到</span></td>
                  </tr>
                  <tr>
                    <td>2023-04-28</td>
                    <td>Web前端开发</td>
                    <td>09:20</td>
                    <td><span class="status present">已签到</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <h3>本月出勤统计</h3>
          </div>
          <div class="card-body">
            <div class="attendance-stats">
              <div class="stat-item">
                <div class="stat-value">18</div>
                <div class="stat-label">应出勤</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">16</div>
                <div class="stat-label">实际出勤</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">2</div>
                <div class="stat-label">缺勤</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">89%</div>
                <div class="stat-label">出勤率</div>
              </div>
            </div>
            <div class="chart-container small-chart">
              <canvas id="attendanceChart"></canvas>
            </div>
          </div>
        </div>
      </div>

      <!-- 通知中心页面 -->
      <div id="notifications-page" class="page hidden">
        <div class="page-header">
          <h2>通知中心</h2>
          <p>查看所有系统通知</p>
        </div>

        <div class="card">
          <div class="card-header notifications-header">
            <h3>所有通知</h3>
            <div class="notifications-controls">
              <select id="notificationsFilterPage">
                <option value="all">全部</option>
                <option value="unread">未读</option>
                <option value="lab">实验室通知</option>
                <option value="course">课程相关</option>
              </select>
              <button id="markAllReadPage">标为已读</button>
            </div>
          </div>
          <div class="card-body notifications-body">
            <div class="notification-list">
              <div class="notification-item unread">
                <div class="notification-icon">
                  <i class="fa fa-home"></i>
                </div>
                <div class="notification-content">
                  <p>实验室设备维护通知：本周六将进行设备维护，请提前做好准备</p>
                  <span class="time">10分钟前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item unread">
                <div class="notification-icon">
                  <i class="fa fa-book"></i>
                </div>
                <div class="notification-content">
                  <p>Web前端开发作业已发布，请在周五前完成提交</p>
                  <span class="time">2小时前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item unread">
                <div class="notification-icon">
                  <i class="fa fa-calendar"></i>
                </div>
                <div class="notification-content">
                  <p>下周二的实验课时间调整为下午2点开始</p>
                  <span class="time">昨天</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item">
                <div class="notification-icon">
                  <i class="fa fa-users"></i>
                </div>
                <div class="notification-content">
                  <p>新的实验室小组已分配，请查看你的分组情况</p>
                  <span class="time">3天前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item">
                <div class="notification-icon">
                  <i class="fa fa-trophy"></i>
                </div>
                <div class="notification-content">
                  <p>实验室编程大赛将于下月初举行，现在开始报名</p>
                  <span class="time">1周前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
              <div class="notification-item">
                <div class="notification-icon">
                  <i class="fa fa-exclamation-triangle"></i>
                </div>
                <div class="notification-content">
                  <p>注意：实验室禁止使用U盘等外部存储设备，以防病毒传播</p>
                  <span class="time">2周前</span>
                </div>
                <button class="mark-read">标为已读</button>
              </div>
            </div>
          </div>
          <div class="card-footer forum-pagination">
            <ul class="pagination">
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- 登录/注册模态框 -->
  <div class="modal" id="authModal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="authTitle">登录</h3>
        <button class="modal-close" id="closeAuthModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <!-- 登录表单 -->
        <form id="loginForm" class="auth-form">
          <div class="form-group">
            <label for="loginEmail">邮箱</label>
            <div class="input-icon">
              <i class="fa fa-envelope"></i>
              <input type="email" id="loginEmail" placeholder="请输入邮箱" required>
            </div>
          </div>
          <div class="form-group">
            <label for="loginPassword">密码</label>
            <div class="input-icon">
              <i class="fa fa-lock"></i>
              <input type="password" id="loginPassword" placeholder="请输入密码" required>
              <button type="button" class="toggle-password" data-target="loginPassword">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
          </div>
          <div class="form-check">
            <input type="checkbox" id="rememberMe">
            <label for="rememberMe">记住我</label>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>
          <button type="submit" class="primary-btn full-width">登录</button>
          <p class="auth-switch">
            还没有账号？<button type="button" id="switchToRegister">立即注册</button>
          </p>
        </form>

        <!-- 注册表单 -->
        <form id="registerForm" class="auth-form hidden">
          <div class="form-group">
            <label for="regName">姓名</label>
            <div class="input-icon">
              <i class="fa fa-user"></i>
              <input type="text" id="regName" placeholder="请输入姓名" required>
            </div>
          </div>
          <div class="form-group">
            <label for="regEmail">邮箱</label>
            <div class="input-icon">
              <i class="fa fa-envelope"></i>
              <input type="email" id="regEmail" placeholder="请输入邮箱" required>
            </div>
          </div>
          <div class="form-group">
            <label for="regPassword">密码</label>
            <div class="input-icon">
              <i class="fa fa-lock"></i>
              <input type="password" id="regPassword" placeholder="请设置密码" required>
              <button type="button" class="toggle-password" data-target="regPassword">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
          </div>
          <div class="form-group">
            <label for="regConfirmPassword">确认密码</label>
            <div class="input-icon">
              <i class="fa fa-lock"></i>
              <input type="password" id="regConfirmPassword" placeholder="请确认密码" required>
              <button type="button" class="toggle-password" data-target="regConfirmPassword">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
          </div>
          <button type="submit" class="primary-btn full-width">注册</button>
          <p class="auth-switch">
            已有账号？<button type="button" id="switchToLogin">立即登录</button>
          </p>
        </form>
      </div>
    </div>
  </div>

  <!-- 提交作业模态框 -->
  <div class="modal" id="submitModal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h3>提交作业</h3>
        <button class="modal-close" id="closeSubmitModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="submitAssignmentForm">
          <input type="hidden" id="assignmentId">
          <div class="form-group">
            <label for="assignmentNote">备注（可选）</label>
            <textarea id="assignmentNote" rows="3" placeholder="请输入作业相关说明..."></textarea>
          </div>
          <div class="form-group">
            <label for="fileInput">上传文件</label>
            <div class="file-upload">
              <input type="file" id="fileInput" required>
              <label for="fileInput">
                <i class="fa fa-upload"></i>
                <span>选择文件</span>
              </label>
              <span id="fileNames" class="file-name">未选择文件</span>
            </div>
            <p class="file-note">支持上传ZIP、RAR、PDF、DOC、DOCX、JS、HTML、CSS格式文件，最大50MB</p>
          </div>
          <div class="form-actions">
            <button type="submit" class="primary-btn">提交</button>
            <button type="button" class="secondary-btn" id="cancelSubmit">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 发布主题模态框 -->
  <div class="modal" id="threadModal">
    <div class="modal-overlay"></div>
    <div class="modal-content large-modal">
      <div class="modal-header">
        <h3>发布新主题</h3>
        <button class="modal-close" id="closeThreadModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="newThreadForm">
          <div class="form-group">
            <label for="threadTitle">标题</label>
            <input type="text" id="threadTitle" placeholder="请输入主题标题" required>
          </div>
          <div class="form-group">
            <label for="threadCategory">分类</label>
            <select id="threadCategory" required>
              <option value="">请选择分类</option>
              <option value="question">问题求助</option>
              <option value="share">经验分享</option>
              <option value="discussion">技术讨论</option>
              <option value="lab">实验室相关</option>
              <option value="other">其他</option>
            </select>
          </div>
          <div class="form-group">
            <label for="threadContent">内容</label>
            <textarea id="threadContent" rows="8" placeholder="请输入主题内容..." required></textarea>
          </div>
          <div class="form-group">
            <label for="threadFileInput">上传附件（可选）</label>
            <div class="file-upload">
              <input type="file" id="threadFileInput">
              <label for="threadFileInput">
                <i class="fa fa-upload"></i>
                <span>选择文件</span>
              </label>
              <span id="threadFileNames" class="file-name">未选择文件</span>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="primary-btn">发布</button>
            <button type="button" class="secondary-btn" id="cancelThread">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 提示消息 -->
  <div id="toast" class="toast hidden">
    <i class="fa fa-check-circle"></i>
    <span id="toastMessage"></span>
  </div>

  <!-- 引入自定义脚本 -->
  <script src="../js/class.js"></script>
</body>

</html>